<template>
    <div class="app-container">
        <el-card>
            <el-form :model="form" inline>
                <el-form-item>
                    <el-button type="success" :icon="Plus">新增
                    </el-button>
                </el-form-item>
                <el-form-item label="关键字">
                    <el-input v-model="form.keyWord" placeholder="关键字" />
                </el-form-item>
                <el-form-item label="商品类型">
                    <el-select v-model="form.commodityType" style="width: 200px;" placeholder="商品类型" />
                </el-form-item>
                <el-form-item label="商品分类">
                    <el-select v-model="form.commoditySort" style="width: 200px;" clearable placeholder="商品分类">
                        <el-option v-for="item in sortLIst" :label="item.label" :value="item.value"
                            :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :icon="Search">搜索
                    </el-button>
                    <el-button type="default" plain :icon="Refresh">重置
                    </el-button>

                </el-form-item>
            </el-form>
            <el-table :data="data" style="width: 100%">
                <el-table-column prop="stock" label="商品库存" />
                <el-table-column prop="name" label="商品名称" />
                <el-table-column prop="name" label="商品名称">
                    <template v-slot="scope">
                        <el-image style="width: 100px; height: 100px"
                            src="https://tse3-mm.cn.bing.net/th/id/OIP-C.HMD7apl5iIsX5hkYfTSkBQHaHa?rs=1&pid=ImgDetMain"
                            fit="cover"
                            :preview-src-list="['https://tse3-mm.cn.bing.net/th/id/OIP-C.HMD7apl5iIsX5hkYfTSkBQHaHa?rs=1&pid=ImgDetMain']"
                            preview-teleported />
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="商品类型" />
                <el-table-column prop="category" label="商品类目" />
                <el-table-column prop="brand" label="商品品牌" />
                <el-table-column prop="proposedPrice" label="参考价" />
                <el-table-column prop="recommendLevel" label="普通" />
                <el-table-column prop="salesVolume" label="销量" />
                <el-table-column prop="operation" label="操作">
                    <el-button type="success" link>详情</el-button>
                    <el-button type="primary" link>操作</el-button>
                    <el-button type="danger" link>删除</el-button>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Plus, Refresh, Search } from '@element-plus/icons-vue';

const form = ref({
    keyWord: '关键字',
    commodityType: '商品类型',
    commoditySort: '商品分类'
})
const sortLIst = [{
    label: '分类1',
    value: 1
}]
const data = ref([{
    stock: '商品库存',
    name: '自定义',
    picture: '图片',
    type: '默认',
    category: '自定义',
    brand: '',
    proposedPrice: '0',
    recommendLevel: '普通',
    salesVolume: '0'
}])
</script>
<style lang="scss" scoped>
.page-container {
}
</style>